<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				border: solid 1px cadetblue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="300" height="800"></canvas>
		<script type="text/javascript">
			/* 方法获取HTML <canvas> 元素的引用并获取这个元素的context——图像稍后将在此被渲染 */
			const ctx = document.getElementById('canvas').getContext('2d');
			ctx.fillStyle = 'rgb(200,0,0)'; //设置图形的填充颜色。配合 fill
			ctx.strokeStyle = "pink"; // 设置图形的边框填充色.配合 stroke
			ctx.globalAlpha = 1; //设置透明度

			/* 画方形 */
			/* x , y , 宽 , 高*/
			ctx.fillRect(10, 10, 50, 50); //填充色
			ctx.strokeRect(70, 10, 50, 50); //边框

			/* 画圆形 */
			ctx.beginPath(); //开始画新的
			/* 以中心点位移 x , y , 半径 , 开始绘制的角度 , 结束绘制的角度 , 表示顺时针绘制还是逆时针，false = 顺时针，true = 逆时针，默认值是false */
			ctx.arc(215, 35, 25, Math.PI * 1, Math.PI * 2, true);
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(155, 35, 25, 0, Math.PI * 2, true);
			ctx.fill();

			/* 使用 rgba 示例*/
			// 画背景
			ctx.fillStyle = 'rgb(255,221,0)';
			ctx.fillRect(10, 70, 150, 37.5);
			ctx.fillStyle = 'rgb(102,204,0)';
			ctx.fillRect(10, 107.5, 150, 37.5);
			ctx.fillStyle = 'rgb(0,153,255)';
			ctx.fillRect(10, 145, 150, 37.5);
			ctx.fillStyle = 'rgb(255,51,0)';
			ctx.fillRect(10, 182.5, 150, 37.5);

			// 画半透明矩形
			for (var i = 0; i < 10; i++) {
				ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
				for (var j = 0; j < 4; j++) {
					ctx.fillRect(15 + i * 14, 75 + j * 37.5, 14, 27.5)
				}
			}
			
			/* 画圆圈示例 */
			for (var i = 0; i < 6; i++) {
				for (var j = 0; j < 6; j++) {
					ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
						Math.floor(255 - 42.5 * j) + ')';
					ctx.beginPath();
					ctx.arc(20 + j * 25, 242.5 + i * 25, 10, 0, Math.PI * 2, true);
					ctx.stroke();
				}
			}
		</script>
	</body>
</html>
